<template>
<!-- HTML结构：要求template里面，有且只有一个根标签 -->
<div>
  <h2>这是根组件</h2>
  <!-- 插值表达式，也叫大胡子，小胡子语法 -->
  <p>姓名：{{uname.toUpperCase() + '你好'}}</p>
  <p>年龄：{{age}}</p>
  <p>{{flag ? '1111' : '22222'}}</p>
  <!-- v-html类似innerhtml，会将html标签的样式呈现出来，覆盖原来的内容 -->
  <p v-html="info">简介：</p>
</div>
    
</template>

<script>
export default{
  //对象里面可以写很多东西，比如data,methods,computed,watch,components....
  // data 用于存储数据，写法上要求data定义成函数，函数里面返回一个对象，所有的数据都放到这个返回的对象中
  data(){
    return {
      //页面中用到的数据，都放到这里
      uname:'zhangsan',
      age:30,
      flag:true,
      info:'这是一个<strong>非常优秀</strong>的girl'
    }
  }
}
</script>

<style>

</style>
